Mi barra de búsqueda <input> se mostrará y ocultará varias veces cuando coloque el mouse sobre el botón. no sé por qué
Lo que quiero hacer es deslizar la barra de búsqueda de derecha a izquierda cuando coloque el mouse sobre el botón y ocultar la barra de búsqueda de izquierda a derecha cuando coloque el mouse fuera del botón , ejemplo: https://www.tsinghua. edu.cn/
Me complace obtener una solución sin jqueryUI, prefiero usar solo animación para deslizar la barra de búsqueda de derecha a izquierda sin cambiar el ancho de toda la página web
HTML completo: https://codepen.io/firestar-reimu/pen/rNpbaEm
$(document).ready(function() { $("button.search") .on("mouseover", function() { $(this).next().show("slide", { direction: "right" }, 500); }) .on("mouseout", function() { $(this).next().hide("slide", { direction: "left" }, 500); }); }) .search { position: absolute; top: 26px; right: 80px; width: 28px; height: 28px; padding: 2px; } .search_bar { display: none; position: absolute; top: 26px; right: 112px; line-height: 24px; width: 160px; } <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <button class="search"><img src="search.svg" style="width: 20px" alt="search"></button> <label class="search_bar"> <input placeholder="Search"> </label>El evento mouseout es disparado por el botón interior de la imagen simultáneamente. Aquí está su solución, simplemente cambió 'mouseover' a 'mouseenter, 'mouseout' a 'mouseleave', y todo está bien ahora;
$(document).ready(function () { $("button.search") .on("mouseenter", function () { $(this).next().show("slide", {direction: "right"}, 500); }) .on("mouseleave", function () { $(this).next().hide("slide", {direction: "left"}, 500); }); })@elmeddinkamalli ha dado una respuesta que soluciona la mayor parte del problema. (usando eventos mouseenter y mouseleave).
Sin embargo, todavía hay un efecto de borde donde puede ocurrir el 'rebote' dentro y fuera de la barra de búsqueda.
Esto sucede si el cursor se coloca en el extremo izquierdo del botón. Ocurre porque la barra de búsqueda se superpone, por lo que parece que el mouse se está yendo, luego ha vuelto a ingresar porque la barra de búsqueda muestra: ninguno, y así sucesivamente.
Este fragmento mueve la barra de búsqueda más hacia la izquierda para tener en cuenta los anchos de relleno y borde. Si bien esto indicaría que un valor de 118 px sería suficiente, parece que aún existe la posibilidad de una pequeña superposición (sospecho que se debe al error de redondeo del efecto de borde cuando el sistema intenta posicionar las cosas exactamente), por lo que se usa un valor de 119 px.
$(document).ready(function() { $("button.search") .on("mouseenter", function() { $(this).next().show("slide", { direction: "right" }, 500); }) .on("mouseleave", function() { $(this).next().hide("slide", { direction: "left" }, 500); }); }) .search { position: absolute; top: 26px; right: 80px; width: 28px; height: 28px; padding: 2px; } .search_bar { display: none; position: absolute; top: 26px; right: 119px; line-height: 24px; width: 160px; } <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <button class="search"><img src="search.svg" style="width: 20px" alt="search"></button> <label class="search_bar"> <input placeholder="Search"> </label>